<template>
	<view>
		<searchHead goback='gobackF' title='换手率' searchTip='searchimg' background='#EE515A' v-if="show_status"></searchHead>
		<view class="content">
			<u-sticky :offsetTop="0" enable h5NavHeight="0">
				<view class="table-title">
					<view class="table-box">
						<z-table :tableData="[]" 
						:columns="columns" 
						:emptyText="emptyText"
						:showLoading="false"
						:stickSide="true"></z-table>
					</view>
				</view>
			</u-sticky>
			
			<view class="table-box table-data">
				<z-table :tableData="tableData" 
				:columns="columns" 
				:emptyText="emptyText"
				:showLoading="false"
				:stickSide="true"></z-table>
			</view>
			
			<u-loadmore :status="status" />
		</view>
		
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import zTable from "@/components/z-table/z-table.vue";
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
	export default {
		components: {
			searchHead,
			zTable
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgb(30, 30, 30)',
				},
                show_status:false,
				color:"#CCC",
				// tableHeight:((windowHeight -42) * (750 / windowWidth)),
				tableData:[/* {
					"name": "<uni-view class='title'>长虹美菱</uni-view> <uni-view class='code'>000521</uni-view>",
					"code": "000521",
					"reason": "日涨幅偏离值达到7%的前5只证券",
					"up_down": "9.9757",
					"clean_buy": -2184.6,
					"buy": 7892.41,
					"buy_proportion": "-1.94%",
					"sell": 10077.01,
					"sproportion": "15.97%",
					"unscramble": "实力游资买入，成功率39.21%"
				}, */
				],
				emptyText:"没有数据哦！请选择其它时间查看~",
				columns:[{
					'title':'股票名称',
					'key':'name',
					'width':'250',
				},{
					'title':'涨跌幅',
					'key':'Increase',
					'width':'210',
				},{
					'title':'价格',
					'key':'price',
					'width':'300',
				}],
				status: 'loadmore',
				page: 1,
			}
		},
		methods: {
			reload(){
				this.tableData = [];
				this.page = 1;
				this.getTableData()
			},
			getTableData(){
				this.$Request.get(this.$api.index.getturnoverrate,{
					page:this.page
				}).then(res => {
					if(res.code == 0){
						let data = res.data;
						for(let index in data){
							data[index].name = "<uni-view class='title'>"+data[index].name+"</uni-view> <uni-view class='code'>"+data[index].code+"</uni-view>"
							let Increase = (Number(data[index].Increase)).toFixed(2)
							if(Increase > 0){
								Increase = "<text style='color:rgb(222, 46, 46)'>"+Increase+"%</text>"
							}else if(Increase < 0){
								Increase = "<text style='color:#19be6b'>"+Increase+"%</text>"
							}
							data[index].Increase = Increase
							
							this.tableData.push(data[index])
						}
						console.log();
					}
					
				})
			},
			onReachBottom() {
				this.status = 'loading';
				this.page++;
				this.getTableData();
			}
		},
        onLoad(e) {
            if(e.status =='true'){
                this.show_status = true;
            }
        },
		created() {
			this.getTableData(this.current)
		}
	}
</script>

<style lang="less" scoped>
	//table 样式修改
	/deep/.z-table {
		border: none;
		.table-empty{
			margin-top: 20rpx;
		}
		.z-table-title {
			// display: none;
			height: 90rpx;
			font-weight: bold;
			.z-table-title-item{
				background: #efefef;
				border: none;
				height: 100%;
			}
		}
		.z-table-col-text{
			text-align: center !important;
			font-size: 26rpx;
			uni-view{
				width: 100%;
			}
		}
		.z-table-stick-side{
			border: none;
		}
		.z-table-container-row{
			height: 90rpx;
			.z-table-container-col{
				line-height: unset !important;
				height: 100%;
				.title{
					font-size: 28rpx;
					font-weight: bold;
				}
				.code{
					font-size: 22rpx;
				}
			}
		}
	}
	/deep/ .table-data{
		.z-table-title{
			display: none;
		}
	}
	
	/deep/.table-title{
		.table-empty{display: none;}
		.z-table{
			min-height:0rpx;
		}
	}
	
	.date_show{
		background-color: #efefef;
		height: 70rpx;
		border-bottom: 2px solid #fdfdfd;
		text-align: center;
		line-height: 70rpx;
	}
	.list-title{
		background-color: #efefef;
		border-top: 1px solid #fdfdfd;
		height: 90rpx;
		font-weight: bold;
		.u-col{
			text-align: center !important;	
		}
	}
</style>
